.flip-box {
    background-color: $white;
    min-width: 300px;
    height: 200px;
    perspective: 1000px;

    .flip-box-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        @include transition(.8s);
        transform-style: preserve-3d;
        
        .flip-box-front, .flip-box-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    
        .flip-box-front {
            background-color: #bbb;
            color: black;
        }
        
        .flip-box-back.vertical {
            background-color: dodgerblue;
            color: white;
            transform: rotateX(180deg);
        }
        .flip-box-back.horizental {
            background-color: dodgerblue;
            color: white;
            transform: rotateY(180deg);
        }
    }
    &:hover .flip-box-inner.vertical {
        transform: rotateX(180deg);
    }
    &:hover .flip-box-inner.horizental {
        transform: rotateY(180deg);
    }
}